/* 
目标：案例小缺陷
  复现小缺陷：
    1. 在用户输入框输入内容的时候，List 组件触发了渲染。

  预期效果：
    1. 点击发布的时候，改变了 list 数组。
    2. list 数组被改变的时候，才触发 List 组件的 render 更新。

  分析造成现象的原因：
    1. 输入框 inputValue 通过 this.setState() 实现双向绑定。
    2. setState 调用的时候会触发 App 组件的 render 方法。
    3. render 方法被调用的时候，造成了 List 组件被重新调用。
    4. List 组件被重新调用，所以最终导致 List 的 render 被触发了。


  解决方案1：
    1. 让子组件 继承与 React.PureComponent。
    2. 父组件 list 数据深拷贝后，再进行 setState 操作。

  解决方案2：
    通过生命周期函数自己封装实现。

*/
import React from 'react';

// List 子组件
class List extends React.PureComponent {
  render() {
    console.log('List render 更新');
    return (
      <ol>
        {
          this.props.list.map((item, index) => <li onDoubleClick={() => this.props.aa(index)} key={item}>{item}</li>)
        }
      </ol>
    );
  }
}

class App extends React.Component {
  state = {
    inputValue: '菠萝',
    list: ['新闻1', '新闻2']
  };
  // 获取表单值
  handleChange = (e) => {
    // console.log(e.target.value);
    this.setState({ inputValue: e.target.value });
  };

  // 点击发布按钮
  handleClick = () => {
    // 利用解构赋值获取数据
    let { inputValue, list } = this.state;

    // 真正的深拷贝两种解决方案：
    //    1. 函数递归 - 上网找就好
    //    2. JSON.parse(JSON.stringify(xxx)) 
    let newList = JSON.parse(JSON.stringify(list));

    if (inputValue.trim() === '') {
      alert('请输入内容');
      return;
    }
    if (newList.indexOf(inputValue) === -1) {
      newList.unshift(inputValue);
      this.setState({ list: newList, inputValue: '' });
    }
  };

  itemDelete = (index) => {
    const { list } = this.state;
    list.splice(index, 1);
    this.setState({ list });
  };
  render() {
    // 利用解构赋值获取数据
    const { list, inputValue } = this.state;
    return (
      <div className="App">
        <input type="text" value={inputValue} onChange={this.handleChange} />
        <button onClick={this.handleClick}>发布</button>
        <List list={list} aa={this.itemDelete}></List>
      </div>
    );
  }
}


export default App;
